<template>
  <div>
    <van-nav-bar
      title="选择收货地址"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <Search></Search>
    <CurrentCity></CurrentCity>
    <div class="backGround"></div>
    <div class="address">收货地址</div>
    <div>
      <van-cell v-for="item in list" :key="item.id" @click="clickObj(item)">
        <div slot="title">
          <h4>
            {{ item.address_detail }}
            <van-tag type="primary">{{ item.tag }}</van-tag>
          </h4>
          <div>{{ item.address }}</div>
        </div>
        <div slot="label">
          <span>{{ item.name }}</span>
          &nbsp;
          <span>{{ item.phone }}</span>
        </div>
      </van-cell>
    </div>
    <div v-if="list.length === 0">
      <van-cell title="没有收货地址，请添加"></van-cell>
    </div>
  </div>
</template>

<script>
import CurrentCity from './components/currentCity.vue'
import Search from './components/search.vue'
import { getAddressList } from '@/api/address'
import { mapState } from 'vuex'
export default {
  name: 'list',
  data() {
    return {
      currentCity: {},
      list: [],
    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  created() {
    this.getAddressList()
    this.getCurrentCity()
  },
  components: {
    CurrentCity,
    Search,
  },
  methods: {
    async getAddressList() {
      const { data } = await getAddressList(this.userInfo.user_id)
      this.list = data
    },
    onClickLeft() {
      this.$router.back()
    },

    async getCurrentCity() {
      //   this.$toast.loading({
      //     message: "保存中...",
      //     forbidClick: true, // 禁止背景点击
      //     duration: 0, // 持续展示
      //   });
      const city = JSON.parse(localStorage.getItem('currentCity'))
      if (city) {
        this.currentCity = city
      } else {
        this.currentCity = {
          pinyin: 'changsha',
          is_map: true,
          longitude: 112.938858,
          latitude: 28.227779,
          sort: 2000,
          area_code: '0731',
          abbr: 'CS',
          name: '长沙',
          id: 21,
        }
      }

      //   this.$toast.success("更新成功");
    },
    clickObj(item) {
      this.$store.commit('setcurrentAddress', item)
      this.$router.push('/home')
    },
  },
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  background-color: #3190e8;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-nav-bar__text {
    color: #fff;
  }
  /deep/ .van-icon {
    color: #fff;
  }
}
.van-search__label {
  .van-icon-arrow-down {
    font-size: 1px;
  }
}
.backGround {
  width: 100%;
  height: 15px;
  background-color: #eee;
}
.address {
  padding: 15px 16px;
  color: #b0b0b0;
  font-size: 14px;
}
h4 {
  margin: 0;
  padding: 0;
}
</style>